<template>
	<common-page title="注册新账号">
		<el-steps :active="stepActive" simple finish-status="success">
			<el-step title="基础信息" />
			<el-step title="详细信息" />
			<el-step title="完成注册" />
		</el-steps>
		<el-form v-if="stepActive==0" ref="stepForm0" :model="form" :rules="rules" :label-width="120">
			<el-form-item label="登录账号" prop="user">
				<el-input v-model="form.user" placeholder="请输入登录账号"></el-input>
				<div class="el-form-item-msg">登录账号将作为登录时的唯一凭证</div>
			</el-form-item>
			<el-form-item label="登录密码" prop="password">
				<el-input v-model="form.password" type="password" show-password placeholder="请输入登录密码"></el-input>
				<m-password-strength v-model="form.password"></m-password-strength>
				<div class="el-form-item-msg">请输入包含英文、数字的8位以上密码</div>
			</el-form-item>
			<el-form-item label="确认密码" prop="password2">
				<el-input v-model="form.password2" type="password" show-password placeholder="请再一次输入登录密码"></el-input>
			</el-form-item>
			<el-form-item label="" prop="agree">
				<el-checkbox v-model="form.agree" label="">已阅读并同意</el-checkbox><span class="link"
					@click="showAgree=true">《平台服务协议》</span>
			</el-form-item>
		</el-form>
		<el-form v-if="stepActive==1" ref="stepForm1" :model="form" :rules="rules" :label-width="120">
			<el-form-item label="真实姓名" prop="userName">
				<el-input v-model="form.userName" placeholder="请输入真实姓名"></el-input>
			</el-form-item>
			<el-form-item label="邮箱" prop="email">
				<el-input v-model="form.email" placeholder="请输入邮箱地址"></el-input>
			</el-form-item>
			<el-form-item label="账号类型" prop="userType">
				<el-radio-group v-model="form.userType">
					<el-radio-button label="1">企业开发者</el-radio-button>
					<el-radio-button label="2">企业开发者</el-radio-button>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="开通类别" prop="open">
				<el-checkbox-group v-model="form.open">
					<el-checkbox label="1">云存储API</el-checkbox>
					<el-checkbox label="2">云检索API</el-checkbox>
					<el-checkbox label="3">Javescript API</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
		</el-form>
		<div v-if="stepActive==2">
			<el-result icon="success" title="注册成功" sub-title="可以使用登录账号以及手机号登录系统">
				<template #extra>
					<el-button type="primary" @click="goLogin">前去登录</el-button>
				</template>
			</el-result>
		</div>
		<el-form style="text-align: center;">
			<el-button v-if="stepActive>0 && stepActive<2" @click="pre">上一步</el-button>
			<el-button v-if="stepActive<1" type="primary" @click="next">下一步</el-button>
			<el-button v-if="stepActive==1" type="primary" @click="save">提交</el-button>
		</el-form>
		<el-dialog v-model="showAgree" title="平台服务协议" :width="800" destroy-on-close>
			平台服务协议
			<template #footer>
				<el-button @click="showAgree=false">取消</el-button>
				<el-button type="primary" @click="showAgree=false;form.agree=true;">我已阅读并同意</el-button>
			</template>
		</el-dialog>
	</common-page>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import MPasswordStrength from '@/components/MPasswordStrength/index.vue'
import commonPage from './components/commonPage.vue'

const router = useRouter()
const stepActive = ref(0);
const showAgree = ref(false)
const stepForm0 = ref()
const stepForm1 = ref()

const form = reactive({
	user: "",
	password: "",
	password2: "",
	agree: false,
	userName: "",
	email: "",
	userType: "1",
	open: []
})

const rules = ref({
	user: [{ required: true, message: '请输入账号名' }],
	password: [{ required: true, message: '请输入密码' }],
	password2: [{ required: true, message: '请再次输入密码' },
	{
		validator: (rule: any, value: any, callback: (e?: Error) => any) => {
			if (value !== form.password) {
				callback(new Error('两次输入密码不一致'));
			} else {
				callback();
			}
		}
	}],
	agree: [{
		validator: (rule: any, value: any, callback: (e?: Error) => any) => {
			if (!value) {
				callback(new Error('请阅读并同意协议'));
			} else {
				callback();
			}
		}
	}],
	userName: [{ required: true, message: '请输入真实姓名' }],
	email: [{ required: true, message: '请输入邮箱地址' }],
	userType: [{ required: true, message: '请选择账户类型' }],
	open: [{ required: true, message: '请选择开通类别' }]
})

onMounted(() => {
})


const pre = () => {
	stepActive.value -= 1
}

const next = () => {
	const formName = `stepForm_${stepActive}`
	stepForm0.value.validate((valid: any) => {
		if (valid) {
			stepActive.value += 1
		} else {
			return false
		}
	})
}
const save = () => {
	const formName = `stepForm_${stepActive}`
	stepForm1.value.validate((valid: any) => {
		if (valid) {
			stepActive.value += 1
		} else {
			return false
		}
	})
}
const goLogin = () => {
	router.push({
		path: '/login'
	})
}

</script>

<style scoped>

</style>
